<template>
    <div class="containerLogin">
        <div class="navBj"></div>
        <div class="forms">
            <div class="logo">
                <img :src="logoUrl" />
            </div>
            <p class="title">欢迎访问嘉会物资申请系统</p>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
                <el-form-item prop="email" style="margin-bottom: 30px">
                    <el-input v-model="ruleForm.email" size="medium" placeholder="登录邮箱"></el-input>
                </el-form-item>
                <el-form-item prop="password" style="margin-bottom: 30px">
                    <el-input type="password" size="medium"
                              placeholder="密码" v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item style="margin-bottom: 30px">
                    <el-button style="width: 100%" size="medium"
                               type="success" @click="submitForm('ruleForm')">登录</el-button>
                    <p class="back" @click="showModal">找回密码</p>
                </el-form-item>
            </el-form>
        </div>
        <vBackPasswordMode  :dialogFormVisible="dialogFormVisible"  @dialogFormVisibleClose="dialogFormVisibleClose" /> <!--找回密码弹窗-->
    </div>
</template>

<script>
import { userLogin } from "../../../components/axios/url";
import http from "../../../components/axios/fetch";
import {UserHelper} from "../../../components/helpers/UserHelper";
import vBackPasswordMode from "../../common/BackPasswordMode.vue"; //找回密码
const Cookie = require('js-cookie');
    export default {
        name: "login",
        data: function(){
            return {
                logoUrl: require('../../../assets/images/logo.png'),
                ruleForm: {
                    email: 'qidi.wang@jiahui.com',
                    password: 'Tbpartners1'
                },
                rules: {
                    email: [
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                },
                dialogFormVisible:false
            }
        },
        components:{
            vBackPasswordMode
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        try{
                            http.post(userLogin, {...this.ruleForm}).then(res => {
                                if(res.data && res.data.resultMess === "success") {

                                    UserHelper.clearCatStatus(); // 每次登陆时， 清空下 默认 分类选择状态
                                    UserHelper.setUserId(res.data.data.userInfo.userId || null);
                                    UserHelper.setUserName(res.data.data.userInfo.userName);
                                    UserHelper.setUserCostCenterId(res.data.data.userInfo.costCenter || null);
                                    UserHelper.setUserCostCenter(res.data.data.userInfo.costCenterDescription || null);
                                    UserHelper.setSearchOrgId(res.data.data.userInfo.searchOrganizationId || null);
                                    UserHelper.setOrganizationId(res.data.data.userInfo.organizationId || null)
                                    UserHelper.setOrganizationName(res.data.data.userInfo.organizationName || null)
                                    UserHelper.setToken(res.data.data.token);

                                    // 存储cookie
                                    Cookie.set('userId', res.data.data.userInfo.userId);
                                    Cookie.set('userName', res.data.data.userInfo.userName);
                                    Cookie.set('userCostCenterId', res.data.data.userInfo.costCenter);
                                    Cookie.set('userCostCenter', res.data.data.userInfo.costCenterDescription);
                                    Cookie.set('searchOrgId', res.data.data.userInfo.searchOrganizationId);
                                    Cookie.set('organizationId', res.data.data.userInfo.organizationId);
                                    Cookie.set('organizationName', res.data.data.userInfo.organizationName);
                                    Cookie.set('token', res.data.data.token);
                                    Cookie.set('url', res.data.data.menuRoute);
                                    this.$router.push(res.data.data.menuRoute);
                                }else {
                                    this.$notify.error({
                                        title: '提示',
                                        message: res.data.resultMess,
                                        type: 'warning'
                                    });
                                }
                            })
                        } catch(error){
                            this.$notify.error({
                                title: '提示',
                                message: '网络错误',
                            });
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 找回密码
            showModal() {
                this.dialogFormVisible = true;
            },

            dialogFormVisibleClose() {  // 关闭弹窗
                this.dialogFormVisible = false
            },
        },

    }
</script>
<style scoped>
    .containerLogin {
        width: 100%;
        height: 100%;
        background: url("../../../assets/images/beiji.png") 20% 90% no-repeat;
        background-size:100%;
    }

    .navBj {
        width: 100%;
        height: 80px;
        background: #15a732;
    }

    .forms {
        position: absolute;
        top: 300px;
        left: 50%;
        margin: -160px 0 0 -160px;
        width: 320px;
        height: 320px;
    }

    .logo {
        text-align: center;
        width: 120px;
        height: 120px;
        cursor: pointer;
        margin-bottom: 20px;
        margin-left: 100px;
    }
    .logo img {
        width: 100%;
        height: 100%;
        margin-right: 8px;
    }
    .title {
        width: 100%;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 30px;
    }
    .back{
        font-family: Heiti SC;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        color: rgba(0, 0, 0, 0.65);
        margin-top: 20px;
        cursor: pointer;
    }

</style>

